<template>
	<div class="total-maori-product-instance-dialog-container">
		<el-dialog :title="state.dialog.title" v-model="state.dialog.isShowDialog" width="800px">
			<el-form ref="totalMaoriProductInstanceDialogFormRef" :model="state.ruleForm" size="default" label-width="140px">
				<el-row :gutter="25">

					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item label="采购占比">
							<el-col :span="16">
								<el-input v-model="state.ruleForm.purchasePercent" clearable></el-input>
							</el-col>
							<el-col :span="8">
								<p style="margin: 0; line-height: 32px; text-align: center;">%</p>
							</el-col>
						</el-form-item>
					</el-col>

					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item label="海运费占比">
							<el-col :span="16">
								<el-input v-model="state.ruleForm.oceanShipCostPercent" clearable></el-input>
							</el-col>
							<el-col :span="8">
								<p style="margin: 0; line-height: 32px; text-align: center;">%</p>
							</el-col>
						</el-form-item>
					</el-col>

					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item label="落地成本占比">
							<el-col :span="16">
								<el-input v-model="state.ruleForm.landingCostPercent" clearable></el-input>
							</el-col>
							<el-col :span="8">
								<p style="margin: 0; line-height: 32px; text-align: center;">%</p>
							</el-col>
						</el-form-item>
					</el-col>

					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item label="广告占比">
							<el-col :span="16">
								<el-input v-model="state.ruleForm.advertisingPer" clearable></el-input>
							</el-col>
							<el-col :span="8">
								<p style="margin: 0; line-height: 32px; text-align: center;">%</p>
							</el-col>
						</el-form-item>
					</el-col>

					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item label="折让占比">
							<el-col :span="16">
								<el-input v-model="state.ruleForm.discountPer" clearable></el-input>
							</el-col>
							<el-col :span="8">
								<p style="margin: 0; line-height: 32px; text-align: center;">%</p>
							</el-col>
						</el-form-item>
					</el-col>

					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item label="佣金占比">
							<el-col :span="16">
								<el-input v-model="state.ruleForm.commissionPer" clearable></el-input>
							</el-col>
							<el-col :span="8">
								<p style="margin: 0; line-height: 32px; text-align: center;">%</p>
							</el-col>
						</el-form-item>
					</el-col>

					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item label="营销占比">
							<el-col :span="16">
								<el-input v-model="state.ruleForm.marketPercent" clearable></el-input>
							</el-col>
							<el-col :span="8">
								<p style="margin: 0; line-height: 32px; text-align: center;">%</p>
							</el-col>
						</el-form-item>
					</el-col>

					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item label="配送占比">
							<el-col :span="16">
								<el-input v-model="state.ruleForm.distributionCostPercent" clearable></el-input>
							</el-col>
							<el-col :span="8">
								<p style="margin: 0; line-height: 32px; text-align: center;">%</p>
							</el-col>
						</el-form-item>
					</el-col>

					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item label="仓储占比">
							<el-col :span="16">
								<el-input v-model="state.ruleForm.storageCostPercent" clearable></el-input>
							</el-col>
							<el-col :span="8">
								<p style="margin: 0; line-height: 32px; text-align: center;">%</p>
							</el-col>
						</el-form-item>
					</el-col>

					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item label="退款占比">
							<el-col :span="16">
								<el-input v-model="state.ruleForm.refundPer" clearable></el-input>
							</el-col>
							<el-col :span="8">
								<p style="margin: 0; line-height: 32px; text-align: center;">%</p>
							</el-col>
						</el-form-item>
					</el-col>

					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item label="运营占比">
							<el-col :span="16">
								<el-input v-model="state.ruleForm.operationPercent" clearable></el-input>
							</el-col>
							<el-col :span="8">
								<p style="margin: 0; line-height: 32px; text-align: center;">%</p>
							</el-col>
						</el-form-item>
					</el-col>

					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item label="利润率">
							<el-col :span="16">
								<el-input v-model="state.ruleForm.profitMargin" clearable></el-input>
							</el-col>
							<el-col :span="8">
								<p style="margin: 0; line-height: 32px; text-align: center;">%</p>
							</el-col>
						</el-form-item>
					</el-col>

					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item label="回款率">
							<el-col :span="16">
								<el-input v-model="state.ruleForm.reimbursementRate" clearable></el-input>
							</el-col>
							<el-col :span="8">
								<p style="margin: 0; line-height: 32px; text-align: center;">%</p>
							</el-col>
						</el-form-item>
					</el-col>

				</el-row>
			</el-form>
		</el-dialog>
	</div>
</template>

<script setup lang="ts" name="totalMaoriProductInstanceDialog">
import { reactive, ref } from 'vue';
import { useMaoriApi } from '/@/api/calculate/maori';

// 定义子组件向父组件传值/事件
const emit = defineEmits(['refresh']);

// 定义变量内容
const totalMaoriProductInstanceDialogFormRef = ref();
const state = reactive({
	// 参数请参考 `/src/router/route.ts` 中的 `dynamicRoutes` 路由菜单格式
	ruleForm: {
		purchasePercent: '',	//采购占比
		oceanShipCostPercent: '',//海运费占比
		landingCostPercent: '',//落地成本占比
		advertisingPer: '',//广告占比
		discountPer: '',//折让占比
		commissionPer: '',//佣金占比
		marketPercent: '',//营销占比
		distributionCostPercent: '',//配送占比
		storageCostPercent: '',//仓储占比
		refundPer: '',//退款占比
		operationPercent: '',//运营占比
		profitMargin: '',//利润率
		reimbursementRate: '',//回款率
	},
	dialog: {
		isShowDialog: false,
		title: '',
		submitTxt: '',
	},
});
// 打开弹窗
async function openDialog(productId?: number) {

	const param = {
		'id': productId,
	}
	const result = await maoriApi.totalInstance(param);
	if (result.data.length <= 0)
		return Promise.resolve(true);

	const productDetail: CostingProductInstance = result.data;

	state.ruleForm = productDetail;

	state.dialog.title = '核算汇总';
	state.dialog.submitTxt = '查 看';

	state.dialog.isShowDialog = true;
};
// 关闭弹窗
const closeDialog = () => {
	state.dialog.isShowDialog = false;
};

// 引入 api 请求接口
const maoriApi = useMaoriApi();

// 暴露变量
defineExpose({
	openDialog,
});
</script>